<template>
  <div :class="wrapClasses"
       :style="wrapStyles"
       v-clickoutside="handleClose">
    <!-- 组件真实值 -->
    <input type="hidden"
           ref="hiddenInput"
           :name="$attrs.name"
           :value="value" />
    <!--label-->
    <label :class="labelClasses"
           :for="elementId"
           :style="labelStyles"
           v-if="isShowLabel">
      <slot name="label">{{label}}</slot>
    </label>
    <template v-if="$slots.default">
      <div @click="toggleOpen" ref="reference">
        <slot>
          <!-- 组件展现值 -->
          <input ref="input"
                 :id="elementId"
                 :class="inputClasses"
                 :style="inputStyles"
                 :value="displayValue"
                 v-bind="inputAttrs"
                 v-on="inputListeners" />
          <!--清除按钮-->
          <i ref="clearIcon"
             :class="clearClasses"
             v-if="showClear"
             @click="handleClear">
          </i>
          <!--下拉箭头图标-->
          <i ref="arrowIcon"
             :class="arrowClasses"
             @click="toggleOpen">
          </i>
        </slot>
      </div>
    </template>
    <template v-else>
      <slot>
        <!-- 组件展现值 -->
        <input ref="reference"
               :id="elementId"
               :class="inputClasses"
               :style="inputStyles"
               :value="displayValue"
               v-bind="inputAttrs"
               v-on="inputListeners" />
        <!--清除按钮-->
        <i ref="clearIcon"
           :class="clearClasses"
           v-if="showClear"
           @click="handleClear">
        </i>
        <!--下拉箭头图标-->
        <i ref="arrowIcon"
           :class="arrowClasses"
           @click="toggleOpen">
        </i>
      </slot>
    </template>

    <!--验证提示-->
    <div :class="errorTipClasses"
         :style="errorTipStyles"
         v-if="isShowMessage">
      {{validateMessage}}
    </div>
    <!--下拉弹层-->
    <transition name="transition-drop">
      <Drop v-show="visible"
            :class="{ [prefixCls + '-transfer']: transfer }"
            ref="drop"
            :data-transfer="transfer"
            v-transfer-dom>
        <div>
          <Caspanel ref="caspanel"
                    :prefix-cls="prefixCls"
                    :data="data"
                    :disabled="isDisabled"
                    :change-on-select="changeOnSelect"
                    :trigger="trigger" />
        </div>
      </Drop>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
